<script setup>
import { ref, computed } from "vue";

import { ElMessage, ElMessageBox, ElTag, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import * as admin from '@/api/index.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 成长记录数据
const records = ref([]);

const searchDate = ref(""); // 存储选择的日期
const currentPage = ref(1);
const pageSize = 10;
const total = ref(0);

// **搜索**
const searchByDate = () => {
  currentPage.value = 1; // 重置到第一页
  findData();
};

const findData = async () => {
  const res = await admin.findGrowthRecord({
    currentPage: currentPage.value,
    token: tokenStore.token,
    createdAt: searchDate.value
  });
  if (res.code == 0) {
    records.value = res.data;
    total.value = res.total;
  }
};

const handlePageChange = (page) => {
  currentPage.value = page;
  findData();
};

findData()
</script>

<template>
  <div class="container">
    <!-- 日期筛选 -->
    <div class="search-bar">
      <el-date-picker
        v-model="searchDate"
        type="date"
        placeholder="请选择日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        class="date-picker"
      />
      <el-button type="primary" @click="searchByDate">🔍 搜索</el-button>
    </div>

    <!-- 成长记录时间线 -->
    <el-timeline>
      <el-timeline-item
        v-for="record in records"
        :key="record.id"
        :timestamp="record.createdAt"
        placement="top"
      >
        <el-card class="record-card">
          <div class="record-content">
            <img :src="record.img" class="record-image" />
            <div class="record-info">
              <h3>{{ record.yonghu }}</h3>
              <p class="content">{{ record.record }}</p>
              <p class="date">📅 记录时间：{{ record.createdAt }}</p>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style scoped>
/* 页面整体样式 */
.container {
  padding: 20px;
  max-width: 800px; /* 页面最大宽度 */
  margin: 0 auto; /* 居中 */
}

/* 搜索栏 */
.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  justify-content: center;
}
.date-picker {
  width: 200px;
}

/* 时间轴卡片 */
.record-card {
  width: 100%;
  padding: 15px;
  border-radius: 10px;
  transition: box-shadow 0.2s ease-in-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.record-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 成长记录内容 */
.record-content {
  display: flex;
  align-items: center;
  padding: 10px;
}
.record-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  margin-right: 15px;
}
.record-info {
  flex: 1;
}
.content {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}
.date {
  font-size: 13px;
  color: #999;
}

/* 分页 */
.pagination {
  margin-top: 20px;
  text-align: center;
}



  
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

::v-deep(.el-pagination) {
  font-size: 18px; 
}

::v-deep(.el-pagination .el-pager li) {
  padding: 0 12px;    
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

::v-deep(.el-pagination button) {
  font-size: 18px;
  padding: 0 12px;
}
</style>
